import React, { Component } from 'react';
import { Menu, } from 'antd';

import menuConfig from '../../config/menuConfig'
import './index.less';

const { SubMenu } = Menu;

class NavLeft extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menuTreeNode: [],
    }
  }
  componentWillMount() {
    let menuTreeNode = this.renderMenuNode(menuConfig);
    this.setState({
      menuTreeNode
    })
  }
  // 加载菜单节点树
  renderMenuNode =(data)=> {
    return data.map((item) => {
      if (item.children) {    // 如果当前项还有子菜单，则递归
        return (
          <SubMenu title={item.title} key={item.key}>
            {this.renderMenuNode(item.children)}
          </SubMenu>
        )
      }
      return (
        <Menu.Item key={item.key}>{item.title}</Menu.Item>
      )
    })
  }
  render() {
    return (
      <div>
        <div className="logo">
          <img src="/assets/logo-ant.svg" alt=""/>
          <h1>Imooc MS</h1>
        </div>
        <Menu theme="dark" mode="vertical">
          {this.state.menuTreeNode}
        </Menu>
      </div>
    );
  }
}

export default NavLeft;